<script setup lang="ts">
    import { getBannerList,deleteBanner } from '@/apis/banner'
    import router from '@/router'
    import {ref} from 'vue'
    interface IBanner{
        alt:string,
        bannerid:string,
        flag?:boolean,
        img:string,
        link:string
}
    const handleEdit = (index: number, row: IBanner) => {
        console.log(index, row)
    }
    const handleDelete = (index: number, row: IBanner) => {
        deleteBanner({bannerid:row.bannerid}).then(res=>{
        console.log(res);
        location.reload()
    })
    }
    let tableData = ref<IBanner[]>([]); // tableData,使用reactive包裹的数据是响应式数据
    getBannerList().then(res => {
    console.log(res.data.data);
    tableData.value = res.data.data;
    })
    const addBanner=()=>{
        router.push('/add')
    }
    // const deleteMe=deleteBanner(bannerid.value).then(res=>console.log(res))
    // const bannerid=ref('')
</script>

<template>
    <el-button type="primary" @click="addBanner">
        添加轮播图数据
    </el-button>
    <el-table :data="tableData" style="width: 100%">
      <!-- prop：后端返回的数据的字段名  label代表自定义的表头的名字 -->
      <el-table-column label="序号" width="180px">
         <template #default='scope'>
            {{ scope.$index + 1 }}
         </template>
      </el-table-column>

      <el-table-column prop="img" label="图片展示" width="180">
         <template v-slot:default="scope">
            <img :src="scope.row.img" width="90px">
         </template>
      </el-table-column>
      <el-table-column prop="alt" label="提示信息">
         <template v-slot:default="scope">
            {{ scope.row.alt }}
         </template>
      </el-table-column>
      <el-table-column prop="link" label="跳转地址" />
      <el-table-column label="操作">
         <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
               Edit
            </el-button>
            <el-popconfirm class="box-item" title="确认删除吗？" placement="right">
               <template #reference>
                  <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                     Delete
                  </el-button>
               </template>
            </el-popconfirm>
         </template>
      </el-table-column>
   </el-table>
</template>

<style scoped>

</style>